<template>
  <view class="debt">
	<view class="debt-t">
		  <view class="debt-t-l">
		  	债务人：{{item.obligor.username}}
		  </view>
		  <view class="debt-t-r">
			  <image src="../../static/images/end.png" mode="" class="img"  v-if="item.repay_status == '已完结'" ></image>
			  <view class="warning" v-if="item.repay_status == '已逾期'">!</view>
			  <u-icon name="clock-fill" class="clock_fill" v-if="item.repay_status == '进行中'" ></u-icon>
			  <view class="repay_status">{{ item.repay_status }}</view>
		  </view>
	</view>
	
	<view>
		<u-grid :col="3" :border="false">
			 <u-grid-item>
				 <view class="info-item">
					 <view class="info-item-value">{{item.surplus_money}}</view>
					 <view class="info-item-label">合约金额(元)</view>
				 </view>
			 </u-grid-item>
			 <u-grid-item>
				 <view class="info-item">
					<view class="info-item-value">{{item.loan_date}}</view>
					<view class="info-item-label">开始日期</view>
				 </view>
			 </u-grid-item>
			 <u-grid-item>
				 <view class="info-item">
					<view class="info-item-value blue">{{repayTypeMap[item.repay_type]}}</view>
				 	<view class="info-item-label">还款方式</view>
				 </view>
			 </u-grid-item>
			 <u-grid-item>
				 <view class="info-item">
				 	 <view class="info-item-value">{{item.total_money}}</view>
				 	<view class="info-item-label">总还款金额(元)</view>
				 </view>
			 </u-grid-item>
			 <u-grid-item>
				 <view class="info-item">
					<view class="info-item-value">{{item.repay_date}}</view>
				 	<view class="info-item-label">还款日期</view>
				 </view>
			 </u-grid-item>
			 <u-grid-item>
				 <view class="info-item">
					<view class="info-item-value blue">{{item.year_rate}}</view>
				 	<view class="info-item-label">年利化率(%)</view>
				 </view>
			 </u-grid-item>
		</u-grid>
	</view>
	
	
	<view class="bottom">
		<view></view>
		<view class="OverdueDay" v-if="item.repay_status=='已逾期'">已逾期 {{item.surplus_days}} 天</view>
		<view class="progress" v-if="item.repay_status=='进行中'">剩余 {{item.surplus_days}} 天</view>	
	</view>
</view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
		repayTypeMap: {
			1: '一次性还款',
			2: '按月分期',
			3: '灵活分期'
		}
	};
  },
  components: {},
  methods: {},
  mounted() {},
  watch: {},
  computed: {},
};
</script>

<style scoped lang='scss'>
.debt {
	 width: 686rpx;
	 background: #FFFFFF;
	 margin: 0 auto;
	 border-radius: 10rpx;
	 margin-top: 20rpx;
	 box-shadow: 0px 3px 14px rgba(105, 86, 234, 0.08);
	 
	 &-t {
	 	display: flex;
	 	align-items: center;
	 	justify-content: space-between;
	 	padding: 24rpx 30rpx;
	 	
	 	&-l {
	 		font-weight: 600;
	 		font-size: 32rpx;
	 		color: #0F1E39;
	 	}
	 	&-r {
	 		padding: 12rpx 26rpx;
	 		background: #4A8FF9;
	 		border-radius: 50rpx;
	 		font-weight: 500;
	 		font-size: 26rpx;
	 		color: #FFFFFF;
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
	 	}
	 }
}

.info-item {
		text-align: center;
		
		&-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #0F1E39;
			
			&.blue {
				color: #4A8FF9;
			}
		}
		&-label {
			font-weight: 400;
			font-size: 24rpx;
			color: #999;
			margin-top: 17rpx;
		}
	}

.top {
  padding: 14rpx 0px;
  position: relative;
  height: 52rpx;
}

.overdue {
  display: flex;
  position: absolute;
  right: 32rpx;
  align-items: center;
}

.center {
  width: 100%;
  padding: 0px 32rpx;
  margin-top: 30rpx;
  justify-content: space-between;
}

.fund {
  font-size: 40rpx;
  font-family: DIN;
  font-weight: bold;
  color: #262727;
}

	.bottom {
		width: 100%;
		border-top: 1px solid #EFEFEF;
		margin-top: 28rpx;
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		padding: 16rpx 32rpx;
	}
  .OverdueDay{
		font-size: 32rpx;
	color: #E24D49;
	  font-weight: 700;
	}
	.progress{
	font-size: 32rpx;
	color: #E24D49;
	}
.img {
  width: 22rpx;
  height: 22rpx;
}

.repay_status {
  font-size: 28rpx;
  margin-left: 8rpx;
}

.clock_fill {
  color: #e24d49;
}

.warning {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  background: #f8ad30;
  font-size: 24rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
